<template>
  <div class="signUp">
    <!-- banner -->
    <div class="banner_back">
      <mt-swipe :auto="8000" class="banner">
        <mt-swipe-item class="banner1"></mt-swipe-item>
        <mt-swipe-item class="banner2"></mt-swipe-item>
        <mt-swipe-item class="banner3"></mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 入口区 -->
    <div class="entrance">
      <!-- 日语培训 -->
      <div
        class="education entrance_div"
        id="education"
        v-on:click="entrance_click('education')"
      >
        <div class="education_float">
          <div></div>
          <span
            v-bind:class="[
              { entrance_close_span: focus != 'education' },
              { entrance_open_span: focus == 'education' }
            ]"
            >日语培训</span
          >
        </div>
        <div
          v-bind:class="[
            'education_back',
            { entrance_open: focus == 'education' }
          ]"
        ></div>
      </div>
      <!-- 双语直播 -->
      <div
        class="lecture entrance_div"
        id="lecture"
        v-on:click="entrance_click('lecture')"
      >
        <div class="lecture_float">
          <div></div>
          <span
            v-bind:class="[
              { entrance_close_span: focus != 'lecture' },
              { entrance_open_span: focus == 'lecture' }
            ]"
            >双语直播</span
          >
        </div>
        <div
          v-bind:class="['lecture_back', { entrance_open: focus == 'lecture' }]"
        ></div>
      </div>
      <!-- 录播课 -->
      <div
        class="video entrance_div"
        id="video"
        v-on:click="entrance_click('video')"
      >
        <div class="video_float">
          <div></div>
          <span
            v-bind:class="[
              { entrance_close_span: focus != 'video' },
              { entrance_open_span: focus == 'video' }
            ]"
            >录播课</span
          >
        </div>
        <div
          v-bind:class="['video_back', { entrance_open: focus == 'video' }]"
        ></div>
      </div>
    </div>

    <!-- 入口所对应的列表页面 -->
    <mt-tab-container :active.sync="focus" v-model="focus" class="tab_view">
      <!-- 日语培训列表页面 -->
      <mt-tab-container-item id="education">
        <EducationList
          v-if="focus == 'education'"
          class="listView"
        ></EducationList>
      </mt-tab-container-item>
      <!-- 双语直播列表页面 -->
      <mt-tab-container-item id="lecture">
        <LectureList v-if="focus == 'lecture'" class="listView"></LectureList>
      </mt-tab-container-item>
      <!-- 录播课列表页面 -->
      <mt-tab-container-item id="video">
        <VideoList v-if="focus == 'video'" class="listView"></VideoList>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import EducationList from "@/components/signUp/EducationList.vue";
import LectureList from "@/components/signUp/LectureList.vue";
import VideoList from "@/components/signUp/VideoList.vue";

export default {
  components: {
    EducationList,
    LectureList,
    VideoList
  },
  data() {
    return {
      focus: "education" //控制和记录目前所选择的入口
    };
  },
  created() {
    let strClick = sessionStorage.getItem("signIndex");
    if (strClick != null) {
      this.focus = strClick;
    }
  },
  methods: {
    // 点击入口后切换当前入口变量
    entrance_click(eId) {
      this.focus = eId;
    }
  },
  watch: {
    focus(val) {
      sessionStorage.setItem("signIndex", val);
    }
  }
};
</script>

<style lang="scss" scoped>
//banner
.banner_back {
  width: 100%;
  height: 9.375rem;
  padding-top: 1.875rem;

  /* 设置渐变 */
  background: rgb(255, 127, 95);
  /* Old browsers */
  background: -moz-linear-gradient(
    top,
    rgb(255, 127, 95) 0%,
    rgb(229, 39, 77) 70%,
    rgb(255, 255, 255) 70%
  );
  /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    rgb(255, 127, 95) 0%,
    rgb(229, 39, 77) 70%,
    rgb(255, 255, 255) 70%
  );
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgb(255, 127, 95) 0%,
    rgb(229, 39, 77) 70%,
    rgb(255, 255, 255) 70%
  );
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f5f', endColorstr='#ffffff', GradientType=0);
  /* IE6-9 */

  // banner
  .banner {
    width: 21.5625rem;
    height: 9.375rem;
    margin: 0 auto;
    border-radius: 0.3125rem;

    // 图片缩放
    .banner1 {
      background-image: url(../../assets/banner.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }

    .banner2 {
      background-image: url(../../assets/banner.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }

    .banner3 {
      background-image: url(../../assets/banner.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
  }
}

// 入口区
.entrance {
  margin-top: 0.625rem;
  margin-left: 3.125rem;
  margin-right: 3.125rem;
  display: flex;
  justify-content: space-between;

  // 每一个入口的容器div
  .entrance_div {
    width: 3.75rem;
    height: 6.25rem;

    // 第一个入口的渐变背景（展开）
    .education_back {
      width: 3.75rem;
      height: 3.75rem;
      border-radius: 0.625rem;
      margin-top: 0.625rem;
      // 设置渐变
      background: rgb(255, 153, 133);
      /* Old browsers */
      background: -moz-linear-gradient(
        -45deg,
        rgb(255, 153, 133) 25%,
        rgb(254, 74, 103) 75%
      );
      /* FF3.6-15 */
      background: -webkit-linear-gradient(
        -45deg,
        rgb(255, 153, 133) 25%,
        rgb(254, 74, 103) 75%
      );
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(
        135deg,
        rgb(255, 153, 133) 25%,
        rgb(254, 74, 103) 75%
      );
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9985', endColorstr='#fe4a67', GradientType=1);
      /* IE6-9 fallback on horizontal gradient */
    }

    // 第二个入口的渐变背景（展开）
    .lecture_back {
      width: 3.75rem;
      height: 3.75rem;
      border-radius: 0.625rem;
      margin-top: 0.625rem;
      //设置渐变
      background: rgb(252, 187, 83);
      /* Old browsers */
      background: -moz-linear-gradient(
        -45deg,
        rgb(252, 187, 83) 25%,
        rgb(251, 131, 67) 75%
      );
      /* FF3.6-15 */
      background: -webkit-linear-gradient(
        -45deg,
        rgb(252, 187, 83) 25%,
        rgb(251, 131, 67) 75%
      );
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(
        135deg,
        rgb(252, 187, 83) 25%,
        rgb(251, 131, 67) 75%
      );
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcbb53', endColorstr='#fb8343', GradientType=1);
      /* IE6-9 fallback on horizontal gradient */
    }

    // 第三个入口的渐变背景（展开）
    .video_back {
      width: 3.75rem;
      height: 3.75rem;
      border-radius: 0.625rem;
      margin-top: 0.625rem;
      // 设置渐变
      background: rgb(253, 180, 108);
      /* Old browsers */
      background: -moz-linear-gradient(
        -45deg,
        rgb(253, 180, 108) 25%,
        rgb(250, 120, 125) 75%
      );
      /* FF3.6-15 */
      background: -webkit-linear-gradient(
        -45deg,
        rgb(253, 180, 108) 25%,
        rgb(250, 120, 125) 75%
      );
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(
        135deg,
        rgb(253, 180, 108) 25%,
        rgb(250, 120, 125) 75%
      );
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdb46c', endColorstr='#fa787d', GradientType=1);
      /* IE6-9 fallback on horizontal gradient */
    }

    // 第一个入口的图标和文字的容器
    .education_float {
      width: 3.75rem;
      height: 4.375rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      //让渐变背景在自身的下面，所以采用相对布局来脱离文档流
      position: absolute;
      margin-top: 1.25rem;

      :first-child {
        width: 2.8125rem;
        height: 2.75rem;
        background-image: url(../../assets/jpanese_shool.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
    }

    // 第二个入口的图标和文字的容器
    .lecture_float {
      width: 3.75rem;
      height: 4.375rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      //让渐变背景在自身的下面，所以采用相对布局来脱离文档流
      position: absolute;
      margin-top: 1.25rem;

      :first-child {
        width: 2.8125rem;
        height: 2.75rem;
        background-image: url(../../assets/lecture.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
    }

    // 第三个入口的图标和文字的容器
    .video_float {
      width: 3.75rem;
      height: 4.375rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      //让渐变背景在自身的下面，所以采用相对布局来脱离文档流
      position: absolute;
      margin-top: 1.25rem;

      :first-child {
        width: 2.8125rem;
        height: 2.75rem;
        background-image: url(../../assets/video.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
    }

    // 启动上下拉伸动画
    .entrance_open {
      animation: open_entrance 0.5s forwards; //forwards 动画结束后，保持最后一帧的属性
      -moz-animation: open_entrance 0.5s forwards;
      /* Firefox */
      -webkit-animation: open_entrance 0.5s forwards;
      /* Safari and Chrome */
      -o-animation: open_entrance 0.5s forwards;
      /* Opera */
    }

    // 设置入口区焦点和非焦点的字体样式
    .entrance_open_span {
      font-size: 0.75rem;
      text-align: center;
      color: #ffffff;
    }

    .entrance_close_span {
      font-size: 0.75rem;
      text-align: center;
      color: #333333;
    }

    // 上下拉伸动画配置
    @keyframes open_entrance {
      from {
        height: 3.75rem;
        margin-top: 0.625rem;
      }

      to {
        height: 6.25rem;
        margin-top: 0rem;
      }
    }

    @-moz-keyframes open_entrance

			/* Firefox */ {
      from {
        height: 3.75rem;
        margin-top: 0.625rem;
      }

      to {
        height: 6.25rem;
        margin-top: 0rem;
      }
    }

    @-webkit-keyframes open_entrance

			/* Safari and Chrome */ {
      from {
        height: 3.75rem;
        margin-top: 0.625rem;
      }

      to {
        height: 6.25rem;
        margin-top: 0rem;
      }
    }

    @-o-keyframes open_entrance

			/* Opera */ {
      from {
        height: 3.75rem;
        margin-top: 0.625rem;
      }

      to {
        height: 6.25rem;
        margin-top: 0rem;
      }
    }
  }
}

//列表页面
.tab_view {
  width: 100%;
  margin-top: 0.625rem;

  .listView {
    margin: 0 auto;
  }
}
</style>
